<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>会员卡管理-会员资料</title>
  <link rel="stylesheet" type="text/css" href="../../../themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../../../themes/icon.css">
  <script type="text/javascript" src="../../../easyui/js/jquery.min.js"></script>
  <script type="text/javascript" src="../../../easyui/js/jquery.easyui.min.js"></script>
  <style>
    body {
      font-size: 14px;
      padding: 0;
      margin: 0;
      background-color: #eee;
    }
    a {
      display: inline-block;
      text-decoration: none;
      color: #000;
      padding: 0;
      margin: 0;
    }
    .container{
      display: flex;
      background-color: #ffffff;
    }
    .membership-information{
      width: 350px;
    }
    .edit-person-information{
      text-align: right;
      margin-right: 10px;
      color: rgba(64, 158, 255, 1);
      cursor: pointer;
    }
    .recharge-consume{
      flex: 0 0 600px;
      border-left: 1px solid;
      position: relative;
      width: 600px;
    }
    .form-content{
      display: flex;
      flex-wrap: wrap;
      margin-left: 10px;
      margin-bottom: 20px;
    }
    .form-item{
      display: flex;
      height: 30px;
      line-height: 30px;
      margin-right: 20px;
      margin-top: 20px;
    }
    .form-item label{
      display: flex;
      justify-content: right;
      width: 130px;
    }

    .recharge-button{
      position: absolute;
      top: 0;
      right: 0;
      background-color: rgba(64, 158, 255, 1);
      width: 60px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #ffffff;
    }
    .recharge-history-item, .consume-history-item{
      display: flex;
    }
    .item-left{
      font-weight: bold;
      font-size: 12px;
      text-align: right;
      width: 140px;
      padding-bottom: 10px;
    }
    .item-middle{
      margin: 0 0 0 10px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    .item-middle-top{
      width: 15px;
      height: 15px;
      border-radius: 50%;
      border: 1px solid rgba(64, 158, 255, 1);
    }
    .item-middle-vertical{
      width: 1px;
      background-color: #dddddd;
      flex: 1;
    }
    .item-right{
      display: flex;
      flex-direction: column;
      font-size: 12px;
    }
    .right-con{
      display: flex;
    }
    .right-con-item{
      display: flex;
      margin-left: 10px;
    }
    .right-blue{
      color: rgba(64, 158, 255, 1);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="membership-information">
      <div class="edit-person-information">编辑个人资料</div>
      <div class="membership-information-content">
        <form class="form-content" id="inquire-form" method="post">
          <div class="form-item">
            <label for="membershipCardNumber">会员卡号：</label>
            <input class="easyui-validatebox" placeholder="请输入" type="text" id="membershipCardNumber" name="membershipCardNumber" style="width: 200px;height: 30px;"/>
          </div>
          <div class="form-item">
            <label for="name">姓名：</label>
            <input class="easyui-validatebox" placeholder="请输入" type="text" id="name" name="name" style="width: 200px;height: 30px;"/>
          </div>
          <div class="form-item">
            <label for="sex">性别：</label>
            <select id="sex" class="easyui-combobox" placeholder="请选择" name="dept" style="width:200px;height: 30px;">
              <option>男</option>
              <option>女</option>
              <option>未知性别</option>
            </select>
          </div>
          <div class="form-item">
            <label for="birthDate">出生日期：</label>
            <input class="easyui-validatebox" placeholder="请输入" type="text" id="birthDate" name="birthDate" style="width: 200px;height: 30px;"/>
          </div>
          <div class="form-item">
            <label for="documentType">证件类型：</label>
            <select id="documentType" class="easyui-combobox" placeholder="请选择" name="dept" style="width:200px;height: 30px;">
              <option>居民身份证</option>
              <option>护照</option>
              <option>军官证</option>
            </select>
          </div>
          <div class="form-item">
            <label for="IDNumber">证件号码：</label>
            <input class="easyui-validatebox" placeholder="请输入" type="text" id="IDNumber" name="IDNumber" style="width: 200px;height: 30px;"/>
          </div>
          <div class="form-item">
            <label for="phone">联系电话：</label>
            <input class="easyui-validatebox" placeholder="请输入" type="text" id="phone" name="phone" style="width: 200px;height: 30px;"/>
          </div>
          <div class="form-item">
            <label for="businessName">企业名称：</label>
            <input class="easyui-validatebox" placeholder="请输入" type="text" id="businessName" name="businessName" style="width: 200px;height: 30px;"/>
          </div>
          <div class="form-item">
            <label for="creditCode">企业统一信用代码：</label>
            <input class="easyui-validatebox" placeholder="请输入" type="text" id="creditCode" name="creditCode" style="width: 200px;height: 30px;"/>
          </div>
        </form>
        <div class="membership-list">
          <table class="easyui-datagrid" data-options="ctrlSelect:true,pagination:true">
            <thead>
              <tr>
                <th data-options="field:'a1',width:120,align:'center'">会员卡类型</th>
                <th data-options="field:'a2',width:200,align:'center'">卡余额</th>
                <th data-options="field:'a3',width:100,align:'center'">增费</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>普通卡</td>
                <td>350.00元</td>
                <td>50.00元</td>
              </tr>
              <tr>
                <td>企业卡</td>
                <td>400.00元</td>
                <td>0.00元</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="recharge-consume">
      <div id="tt" class="easyui-tabs" style="width:600px;height:250px;">
        <div title="充值记录" style="padding:20px;display:none;">
          <div class="recharge-history-content">
            <div class="recharge-history-item">
              <div class="item-left">
                <div class="top-up-amount">充值350.00元</div>
                <div class="top-up-time">2024-06-01  15:23:56</div>
              </div>
              <div class="item-middle">
                <div class="item-middle-top"></div>
                <div class="item-middle-vertical"></div>
              </div>
              <div class="item-right">
                <div class="right-con">
                  <div class="right-con-item">充值途径：现场充值</div>
                  <div class="right-con-item">会员卡类型：企业卡</div>
                </div>
                <div class="right-con">
                  <div class="right-con-item">办理人：张瑞（企业充值）</div>
                  <div class="right-con-item">办理人电话：15687879954</div>
                </div>
              </div>
            </div>
            <div class="recharge-history-item">
              <div class="item-left">
                <div class="top-up-amount">充值350.00元</div>
                <div class="top-up-time">2024-06-01  15:23:56</div>
              </div>
              <div class="item-middle">
                <div class="item-middle-top"></div>
                <div class="item-middle-vertical"></div>
              </div>
              <div class="item-right">
                <div class="right-con">
                  <div class="right-con-item">充值途径：现场充值</div>
                  <div class="right-con-item">会员卡类型：企业卡</div>
                </div>
                <div class="right-con">
                  <div class="right-con-item">办理人：张瑞（企业充值）</div>
                  <div class="right-con-item">办理人电话：15687879954</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div title="消费记录" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
          <div class="consume-history-content">
            <div class="consume-history-item">
              <div class="item-left">
                <div class="top-up-amount">充值350.00元</div>
                <div class="top-up-time">2024-06-01  15:23:56</div>
              </div>
              <div class="item-middle">
                <div class="item-middle-top"></div>
                <div class="item-middle-vertical"></div>
              </div>
              <div class="item-right">
                <div class="right-con">
                  <div class="right-con-item">普通卡350.00元  （余额100.00元，赠费50.00元）</div>
                </div>
                <div class="right-con right-blue">
                  <div class="right-con-item">单据号：15648489468453165</div>
                  <div class="right-con-item">体检号：1515616516</div>
                </div>
                <div class="right-con right-blue">
                  <div class="right-con-item">套餐/项目名称：2024职业体检</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="recharge-button">充值</div>
    </div>
  </div>
</body>
</html>
